import Taro, { Component, Config } from '@tarojs/taro'
import { Button, Form, Input, View, Text } from '@tarojs/components'
import classNames from 'classnames'
import './index.scss'
import { SelectCity } from '@/components/index'
import { setReceiveAddress, getReceiveAddress } from '@/utils/storage'
interface IProps {
    showBottom: true,
}
export default class ReceivingAddress extends Component<IProps, {}> {
    state: any

    constructor(props) {
        super(...arguments)
        this.state = {
            addressInfo: {},
            showSelectCity: false,
            isverification: false,
        }
    }

    componentDidMount() {
        let receiveAddress = getReceiveAddress();
        let addressInfo = receiveAddress.addressInfo;
        if (addressInfo) {
            this.setState({
                addressInfo
            })
        }
    }

    //  输入时触发
    onInputAddress(name, { detail: { value } }) {
        const { addressInfo } = this.state
        addressInfo[name] = value
        this.setState({
            addressInfo
        })
    }

    //  确定选择城市
    onConfirmCity(id, names) {
        const { addressInfo } = this.state
        Object.assign(addressInfo, {
            cityCode: id,
            city: names
        })
        this.setState({
            addressInfo
        })
    }

    //  显示城市弹窗
    showCityPopup(bool) {
        this.setState({
            showSelectCity: bool,
            status: bool
        })
    }


    //验证提交
    submitData() {
        const { addressInfo } = this.state;
        const telephone = /^1(3|4|5|7|8|9)\d{9}$/
        if (!addressInfo.name) {
            Taro.showToast({ title: '请输入收货姓名', icon: 'none' })
            return
        }
        if (!addressInfo.telephone) {
            Taro.showToast({ title: '请输入手机号码', icon: 'none' })
            return
        }
        if (addressInfo.telephone && !telephone.test(addressInfo.telephone)) {
            Taro.showToast({ title: '请输入正确的手机号码', icon: 'none' })
            return
        }
        if (!addressInfo.city) {
            Taro.showToast({ title: '请点击选择省市县区', icon: 'none' })
            return
        }
        if (!addressInfo.detail) {
            Taro.showToast({ title: '请输入详细地址', icon: 'none' })
            return
        }
        //存储地址
        setReceiveAddress({ addressInfo: addressInfo });
        this.setState({
            isverification: true,
        })
    }

    render() {
        const { addressInfo, showSelectCity } = this.state
        const { showBottom } = this.props
        return (
            <View>
                <View className="recive-address">
                    <View className="dot"></View>
                    <View> 填写收货地址 </View>
                </View>
                <View className='card-list address-icon'>
                    <View className='list-item thin-border__b'>
                        <View className='item-left'>
                            收货姓名
                        </View>
                        <View className='item-right'>
                            <Input name='addressSnap.name' value={addressInfo.name} maxLength={16} placeholder='请输入姓名' className='item-input' onInput={this.onInputAddress.bind(this, 'name')} />
                        </View>
                    </View>
                    <View className='list-item thin-border__b'>
                        <View className='item-left'>手机号码</View>
                        <View className='item-right'>
                            <Input
                                name='addressSnap.telephone'
                                type='number'
                                value={addressInfo.telephone}
                                maxLength={11}
                                placeholder='请输入手机号'
                                className='item-input'
                                onInput={this.onInputAddress.bind(this, 'telephone')}
                            // onBlur={this.onInputBlur.bind(this, 'telephone')}
                            />
                        </View>
                    </View>
                    <View className='list-item thin-border__b'>
                        <View className='item-left'>省市县区</View>
                        <View className='item-right'>
                            <Input name='addressSnap.city' value={addressInfo.city} disabled placeholder='点击选择省市县区' className='item-input' onClick={this.showCityPopup.bind(this, true)} />
                            <Input name='addressSnap.cityCode' style="display:none;" value={addressInfo.cityCode} className='item-input display-none' />
                        </View>
                    </View>
                    <View className='list-item thin-border__b'>
                        <View className='item-left'>详细地址</View>
                        <View className='item-right'>
                            <Input name='addressSnap.detail' value={addressInfo.detail} placeholder='请输入详细地址' className='item-input' onInput={this.onInputAddress.bind(this, 'detail')} />
                        </View>
                    </View>
                </View>
                {showBottom && <View className='red-word-box'>
                    <View className='red-word'>*以上信息将加密发送</View>
                </View>}
                <SelectCity isOpened={showSelectCity} cityCode={addressInfo.cityCode} onConfirm={this.onConfirmCity.bind(this)} onClose={this.showCityPopup.bind(this, false)} />
            </View>
        )
    }
}